<template>
  <div>
    <!-- 第1行：标题 -->
    <div class="title">
      <h2>消费记录</h2>
    </div>

    <!-- 第2行：查询日期 -->
    <div class="query-form">
      <el-form :inline="true" class="demo-form-inline" @submit.prevent="handleQuery">
        <el-form-item label="开始日期">
          <el-date-picker v-model="startDate" type="date" placeholder="选择开始日期" :picker-options="startDateOptions" />
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker v-model="endDate" type="date" placeholder="选择结束日期" :picker-options="endDateOptions" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 第3行：表格 -->
    <div class="table-container">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="auto" align="left" />
        <el-table-column prop="name" label="消费名称" width="auto" align="left" />
        <el-table-column prop="amount" label="消费金额" width="auto" align="left" />
      </el-table>
    </div>

    <!-- 第4行：分页组件 -->
    <div class="pagination-container">
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
        @current-change="handlePageChange" />
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Consumption',
};
</script>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
// 导入 Axios 用于发送 HTTP 请求
import axios from 'axios';

// 表格数据
const tableData = ref([
  { date: '2023-01-01', name: '早餐', amount: 100.00 },
  { date: '2023-01-02', name: '午餐', amount: 200.00 },
  // 更多数据...
]);

// 查询条件
const startDate = ref('');
const endDate = ref('');

// 分页参数
const total = ref(100); // 总条数
const pageSize = ref(10); // 每页显示条数

// 开始日期的选项
const startDateOptions = computed(() => ({
  disabledDate(time) {
    if (endDate.value) {
      return time.getTime() > new Date(endDate.value).getTime();
    }
    return false;
  }
}));

// 结束日期的选项
const endDateOptions = computed(() => ({
  disabledDate(time) {
    if (startDate.value) {
      return time.getTime() < new Date(startDate.value).getTime();
    }
    return false;
  }
}));

// 查询按钮点击事件
const handleQuery = () => {
  // 验证开始日期和结束日期
  if (!startDate.value || !endDate.value) {
    ElMessage.error('开始日期和结束日期不能为空');
    return;
  }

  if (new Date(startDate.value).getTime() > new Date(endDate.value).getTime()) {
    ElMessage.error('开始日期不能大于结束日期');
    return;
  }

  // 处理查询逻辑
  console.log('查询日期:', startDate.value, endDate.value);
};

// 分页组件当前页改变事件
const handlePageChange = (currentPage: number) => {
  // 处理分页逻辑
  console.log('当前页:', currentPage);
};
</script>

<style scoped>
.title {
  text-align: left;
}

.query-form {
  text-align: left;
}

.table-container {
  width: 100%;
}

.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  /* 可以根据需要调整高度 */
}
</style>